<template>
  <el-dialog destroy-on-close draggable title="Detail" width="800" v-model="visible">
    <el-form :model="formParam" ref="custForm" :rules="rules">
      <el-form-item label="B/L NO." label-width="120px">
        {{formParam.blNo}}
      </el-form-item>
      <el-form-item label="MARKS & NOS." label-width="120px">
        {{formParam.marks}}
      </el-form-item>
      <el-form-item label="DESCRIPTION OF GOODS" label-width="120px">
        {{formParam.goodsDesc}}
      </el-form-item>
      <el-form-item label="NO.& KIND OF PKGS" label-width="120px">
        {{formParam.totalUnits}}&nbsp;&nbsp;{{ formParam.unit }}
      </el-form-item>
      <el-form-item label="G/W(KGS)" label-width="120px">
        {{formParam.totalWeight}}
      </el-form-item>
      <el-form-item label="MEASUREMENT(M³)" label-width="120px">
        {{formParam.totalVolume}}
      </el-form-item>
      <el-form-item label="SHIPPER" label-width="120px">
        {{formParam.shipper}}
      </el-form-item>
      <el-form-item label="CONSIGNEE" label-width="120px">
        {{formParam.consignee}}
      </el-form-item>
      <el-form-item label="NOTIFY PARTY" label-width="120px">
        {{formParam.notifyParty}}
      </el-form-item>
      <el-form-item label="REMARKS" label-width="120px">
        {{formParam.remark}}
      </el-form-item>
      <el-form-item v-if="formParam.splitFileUrl" label="Split File" label-width="120px">
        <el-link :href="formParam.splitFileUrl" type="primary" :underline="false" target="_blank">
          <span class="el-icon-document"> {{getFileName(formParam.splitFileUrl)}} </span>
        </el-link>

      </el-form-item>
      <el-form-item v-if="formParam.combineFileUrl" label="Combine File" label-width="120px" >
        <el-link :href="formParam.combineFileUrl" type="primary" :underline="false" target="_blank">
          <span class="el-icon-document"> {{getFileName(formParam.combineFileUrl)}} </span>
        </el-link>
      </el-form-item>
      <el-form-item v-if="formParam.correctionFileUrl" label="Correction File" label-width="120px" >
        <el-link :href="formParam.correctionFileUrl" type="primary" :underline="false" target="_blank">
          <span class="el-icon-document"> {{getFileName(formParam.correctionFileUrl)}} </span>
        </el-link>
      </el-form-item>
      <el-form-item v-if="formParam.loiFileUrl" label="Loi File" label-width="120px" >
        <el-link :href="formParam.loiFileUrl"  type="primary" :underline="false" target="_blank">
          <span class="el-icon-document"> {{getFileName(formParam.loiFileUrl)}} </span>
        </el-link>
      </el-form-item>

    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="visible = false">{{ $t("ship.button.cancel") }}</el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script setup lang="ts" name="MergeModal">
  import { ElMessageBox } from "element-plus";
  import { ref, reactive, defineExpose, getCurrentInstance } from 'vue';
  import service from "@/utils/request";

  const proxy = getCurrentInstance()?.proxy
  const visible = ref(false);
  const isLoading = ref(false)

  const rules = ref({
  });

  const formParam = reactive({
  })

  const onInit = (details) => {
    visible.value = true;
    Object.keys(details).forEach(k => (formParam[k] = details[k])); 
  }
  // 获取文件名称
  function getFileName(name) {
    // 如果是url那么取最后的名字 如果不是直接返回
    if (name.lastIndexOf("/") > -1) {
      return name.slice(name.lastIndexOf("/") + 1);
    } else {
      return name;
    }
  }
  defineExpose({ onInit });
</script>